import { useState, useCallback } from 'react'
import { connect } from 'react-redux'
import { withRouter } from 'next/router'
import Link from 'next/link'
import { Layout, Input, Avatar, Tooltip, Dropdown, Menu, BackTop } from 'antd'
import { GithubOutlined, UserOutlined } from '@ant-design/icons'

import Container from './Container'
import { actionCreators } from '../store'

const { Header, Footer, Content } = Layout
const { Search } = Input

const githubIconStyle = {
  color: 'white',
  fontSize: 40,
  display: 'block',
  paddingTop: 10,
  marginRight: 20
}

const footerStyle = {
  textAlign: 'center'
}


const MyLayout = ({ children, logout, user, router }) => {
  const urlQuery = router.query && router.query.q
  const [search, setSearch] = useState(urlQuery || '');

  const handleSearchChange = useCallback(event => {
    setSearch(event.target.value)
  }, [setSearch])

  const handleOnSearch = useCallback(() => {
    router.push(`/search?q=${search}`)
  }, [search])

  const handleLogout = useCallback(() => {
    logout()
  }, [logout])

  const userDropDown = (
    <Menu>
      <Menu.Item>
        <a href="javascript:;" onClick={handleLogout}>登 出</a>
      </Menu.Item>
    </Menu>
  )
  return (
    <Layout>
      <Header>
        <Container rernderer={<div className="header-inner"></div>}>
          <div className="header-left">
            <div className="logo">
              <Link href="/">
                <GithubOutlined style={githubIconStyle} />
              </Link>
            </div>
            <div>
              <Search
                placeholder="搜索仓库"
                value={search}
                onChange={handleSearchChange}
                onSearch={handleOnSearch}
              />
            </div>
          </div>
          <div className="header-right">
            <div className="user">
              {
                user && user.id ? (
                  <Dropdown overlay={userDropDown}>
                    <a href='/' className="avatar">
                      <Avatar size={40} src={user.avatar_url} />
                    </a>
                  </Dropdown>
                ) : (
                    <Tooltip title="点击进行登录">
                      <a
                        href={`/prepare-auth?url=${router.asPath}`}
                        className="avatar"
                      >
                        <Avatar size={40} icon={<UserOutlined />}></Avatar>
                      </a>
                    </Tooltip>
                  )
              }
            </div>
          </div>
        </Container>
      </Header>
      <Content>
        <Container>
          {children}
        </Container>
      </Content>
      <Footer style={footerStyle}>
        Develop by XieZhan@<a href="amilto:2289077081@qq.com">2289077081@qq.com</a>
      </Footer>
      <style jsx>{`
        .header-inner {
          display: flex;
          justify-content: space-between;
        }
        .header-left {
          display: flex;
          justify-content: flex-start;
        }
      `}</style>
    </Layout>
  )
}

export default connect(
  state => ({ user: state.user }),
  {
    logout: actionCreators.logout
  }
)(withRouter(MyLayout))